<template>
  <div class="cash-list">
    <van-list class="cash-list-wrap" v-model="loading" :finished="finished" @load="onLoad">
      <van-cell v-for="(item,index) in list" :key="index">
        <div
          slot="title"
          class="title"
        >{{item.name}}</div>
        <div slot="label" class="title-label">{{item.res}}</div>
        <div>
          <div class="cash">¥{{item.cash}}</div>
          <div class="date">{{item.date}}</div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      //是否处于加载状态
      loading: false,
      //是否已加载完成
      finished: false
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        // 请求数据
        this.list = [
          {
            name: '上海迪士尼',
            res: "180****3654",
            cash: 5,
            date: "2019-12-13 17:33"
          },
          {
            name: '周庄',
            res: "180****3654",
            cash: 5,
            date: "2019-12-13 17:33"
          },
          {
            name: '昆山失恋博物馆',
            res: "180****3654",
            cash: 5,
            date: "2019-12-13 17:33"
          }
        ];
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length) {
          this.finished = true;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.cash-list {
  padding: 17px;
  .cash-list-wrap {
    border-radius: 5px;
    box-shadow: 0px 1px 12px 0px rgba(205, 203, 203, 0.34);
    overflow: hidden;
    .title {
      font-weight: bold;
    }
    .title-label {
      color: #cdcbcb;
    }
    .cash {
      font-weight: bold;
      letter-spacing: 1px;
      color: #ff4747;
    }
  }
}
</style>